<template>
    <section>
        <el-col :span="24">
            <el-form :inline="true" @submit.native.prevent>
                <el-form-item>
                    <el-input v-model.trim="searchName" size="small" placeholder="关键词搜索" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-cascader size="small" style="width: 250px"  clearable :options="treeData" v-model="searchRole" :collapse-tags="true"
                                 :props="{value: 'id', label: 'title', multiple: true}" placeholder="权限菜单"></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="searchBtn">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" icon="el-icon-plus" size="small" @click="addBtn">新增角色</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%"  v-loading="loading" :max-height="tableHeight" size="mini">
                <el-table-column type="index" label="序号" width="90"></el-table-column>
                <el-table-column prop="type" label="角色名称"></el-table-column>
                <el-table-column prop="label" label="角色描述"></el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editBtn(scope.$index)">编辑</el-button>
                        <el-button type="text" :loading="(btnLoading && scope.$index == selectIndex)"
                                   @click="openPermission(scope.$index)" style="color: #E6A23C">权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--设置权限-->
        <Modal v-model="permissionVisible" :title="roleTitle" width="610" :loading="true" :mask-closable="false">
            <div style="height:400px;overflow-y: auto;">
                <div style="margin-bottom: 6px;font-weight: bold;">菜单路由</div>
                <el-tree id="tree-box" ref="treeBox" :data="treeData" :props="props" show-checkbox check-strictly node-key="id"
                         @node-click="nodeClick"></el-tree>
            </div>
            <div style="margin-bottom: 24px;" v-if="!currentNode.children && currentNode.id">
                <div style="margin-bottom: 6px;font-weight: bold;">操作权限&nbsp;
                    <span style="color: #ad1b1b">(选中节点：{{currentNode.title}})</span>
                </div>
                <el-checkbox-group v-model="actionChecks" @change="checkActionChange">
                    <el-checkbox v-for="(item, index) in actionCheckList" :label="item.value" :key="index">
                        {{item.label}}
                    </el-checkbox>
                </el-checkbox-group>
                <div style="margin-top: 10px;" v-if="currentNode.path && currentNode.path=='designEd'">设计档案：</div>
                <el-checkbox-group v-if="currentNode.path && currentNode.path=='designEd'" v-model="actionChecks" @change="checkActionChange">
                    <el-checkbox v-for="(item, index) in actionCheckDesignList" :label="item.value" :key="index" style="width: 85px;">
                        {{item.label}}
                    </el-checkbox>
                </el-checkbox-group>
                <div style="margin-top: 10px;" v-if="currentNode.path && currentNode.path=='lends'">全员借赠还：</div>
                <el-checkbox-group v-if="currentNode.path && currentNode.path=='lends'" v-model="actionChecks" @change="checkActionChange">
                    <el-checkbox v-for="(item, index) in actionCheckLendsList" :label="item.value" :key="index">
                        {{item.label}}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <div slot="footer">
                <el-button type="primary" size="small" @click="permissionVisible=false;" plain>退 出</el-button>
                <el-button type="primary" size="small" @click="setRolePermission" :loading="btnLoading">提 交</el-button>
            </div>
        </Modal>

        <!--新增/编辑角色-->
        <Modal v-model="addRoleVisible" :title="roleTitle" width="500px" :loading="true" :mask-closable="false">
            <el-form label-width="90px" @submit.native.prevent>
                <el-form-item label="角色类型">
                    <el-input v-model.trim="form.type" size="small" placeholder="请输入角色类型(注：只限英文、数字、下划线)"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model.trim="form.label" size="small" placeholder="请输入角色描述"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <i-button type="primary" :loading="btnLoading" @click="handleSubmit">提交</i-button>
            </div>
        </Modal>
    </section>
</template>
<script>
import {roleList, roleSave, rolePermission, rolePermissionSave} from "@/api/sys/role";
import {menuTree} from "../../api/sys/menu";

export default {
    name: 'sys_role',
    data() {
        return {
            props: {
                label: "title"
            },

            actionChecks: [],
            actionCheckList: [
                {value: "edit", label:"编辑"},
                {value: "add", label:"新增"},
                {value: "del", label:"删除"},
                {value: "import", label:"导入"},
                {value: "export", label:"导出"},
                {value: "check", label:"审核"},
                {value: "pay", label:"付款"},
                {value: "apply", label:"申请"},
                {value: "push", label:"推送"},
                {value: "cancel", label:"作废"},
                {value: "lock", label:"锁定"},
                {value: "unlock", label:"解锁"},
            ],
            actionCheckDesignList:[
                {value: "b1_check", label:"设计确认"},
                {value: "b2_check", label:"技术确认"},
                {value: "b3_check", label:"生产确认"},
                {value: "b_stop", label:"停用"},
                {value: "d_material", label:"/：物料清单"},
                {value: "d_color", label:"/：颜色"},
                {value: "d_size", label:"/：尺码"},
                {value: "d_rule", label:"/：尺寸表"},
                {value: "d_bom", label:"/：大货BOM"},
                {value: "d_bom_xh", label:"/：绣花BOM"},
                {value: "d_yy_gs", label:"/：样衣工时"},
                {value: "d_gy", label:"/：工艺单"},
                {value: "d_wash", label:"/：水洗方式"},
                {value: "d_file", label:"/：相关资料"},
                {value: "d_attach", label:"/：附件"},
                {value: "d_logs", label:"/：日志"},
            ],
            actionCheckLendsList:[
                {value: "lendReturn", label:"归还所选(系统)"},
                {value: "lendGive", label:"借转赠送(系统)"},
            ],
            nodeActions: {},
            currentNode: {},

            searchName: '',
            searchRole: [],
            btnLoading:false,
            addRoleVisible: false,
            permissionVisible: false,
            selectIndex: '',
            data: [],
            treeData: [],
            form: {},
            roleTitle: "新增【角色】",
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            tableHeight: window.innerHeight-240,
        }
    },
    watch:{

    },
    methods: {
        addBtn(){
            this.roleTitle = "新增【角色】";
            this.form = {type:'',label:''};
            this.addRoleVisible = true;
        },
        editBtn(index){
            this.roleTitle = "编辑【角色】"
            this.form = Object.assign({}, this.data[index]);
            this.addRoleVisible = true;
        },
        //勾选按钮权限触发事件
        checkActionChange(){
            this.nodeActions[this.currentNode.id] = this.actionChecks;
            console.log("打钩", this.nodeActions)
        },
        //点击树触发事件
        nodeClick(node){
            this.actionChecks = [];
            this.currentNode = node;
            if(node.children){
                return;
            }
            this.actionChecks = this.nodeActions[node.id] ? this.nodeActions[node.id] : [];
            console.log("current", node)
        },
        openPermission(index){
            this.selectIndex = index;
            this.roleTitle = "设置【"+this.data[index].label+" - 权限】";
            this.actionChecks = [];
            this.currentNode = {};
            this.btnLoading = true;
            let param = {role_id: this.data[index].id};
            rolePermission(param).then((res)=>{
                this.btnLoading = false;
                if(res.code === 0){
                    this.permissionVisible = true;
                    this.$refs.treeBox.setCheckedKeys(!!res.data['menu_ids'] ? res.data['menu_ids'] : []);
                    this.nodeActions = !!res.data['node_actions'] ? res.data['node_actions'] : {};
                    console.log(this.nodeActions)
                }else{
                    this.$Message.error(res.msg);
                }
            }).catch(()=>{

            });
        },
        setRolePermission(){
            let nodeIds = this.$refs.treeBox.getCheckedKeys();
            let param = {
                role_id: this.data[this.selectIndex].id,
                menu_ids: JSON.stringify(nodeIds),
                node_actions: JSON.stringify(this.nodeActions)
            };
            this.btnLoading = true;
            rolePermissionSave(param).then((res)=>{
                this.btnLoading = false;
                if(res.code === 0){
                    this.$Message.success("提示：权限设置成功");
                    this.permissionVisible = false;
                }else{
                    this.$Message.error(res.msg);
                }
            }).catch(()=>{
                this.btnLoading = false;
            });
        },
        searchBtn(){
            this.page = 1;
            this.getData();
        },
        handleSubmit(){
            if(/[^a-zA-Z_0-9]/g.test(this.form.type)){
                this.$Message.warning("提示：类型仅支持英文、数字、下划线");
                return;
            }
            if(this.form.type=="" || this.form.label==""){
                this.$Message.warning("提示：内容不能为空");
                return;
            }
            this.btnLoading = true;
            roleSave(this.form).then((res) => {
                this.btnLoading = false;
                if(res.code === 0){
                    this.$Message.success(res.msg);
                    this.addRoleVisible = false;
                    this.getData();
                }else{
                    this.$Message.error(res.msg);
                }
            }).catch(()=>{
                this.btnLoading = false;
            });
        },
        //翻页
        pageChange(page){
            this.page = page;
            this.getData();
        },
        //获取数据
        getData(){
            let param = {
                page: this.page,
                limit: this.limit,
                label: this.searchName,
            };
            let roles = JSON.parse(JSON.stringify(this.searchRole));
            if(roles.length > 0){
                let role = [];
                roles.forEach(item => {
                    role.push(item.pop());
                });
                param.role = role;
            }
            this.loading = true;
            roleList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(()=>{
                this.loading = false;
            });
        },
        //获取树列表
        getTree(){
            menuTree().then((res)=>{
                this.treeData = res.data;
            });
        },
    },
    mounted(){
        this.searchBtn();
        this.getTree();

    },
}
</script>
